import React from 'react';
import { Table, Button, DatePicker, InputNumber, Select } from 'antd';
import { DeleteOutlined } from '@ant-design/icons';
import type { PriceHistoryItem } from '../data';
import moment from 'moment';

interface ExtendedPriceHistoryItem extends PriceHistoryItem {
  _id?: string;
}

interface PriceHistoryTableProps {
  priceHistory: ExtendedPriceHistoryItem[];
  onAdd: () => void;
  onUpdate: (index: number, field: string, value: any) => void;
  onDelete: (index: number) => void;
}

const PriceHistoryTable: React.FC<PriceHistoryTableProps> = ({
  priceHistory,
  onAdd,
  onUpdate,
  onDelete,
}) => {
  const columns = [
    {
      title: "日期",
      dataIndex: "date",
      key: "date",
      width: "15%",
      render: (text: string, record: ExtendedPriceHistoryItem, index: number) => (
        <DatePicker
          value={moment(text)}
          onChange={(date) =>
            onUpdate(index, "date", date?.format("YYYY-MM-DD"))
          }
          style={{ width: "100%" }}
        />
      ),
    },
    {
      title: "市场价",
      dataIndex: "marketPrice",
      key: "marketPrice",
      width: "15%",
      render: (text: number, record: ExtendedPriceHistoryItem, index: number) => (
        <InputNumber
          value={text}
          onChange={(value) =>
            onUpdate(index, "marketPrice", value)
          }
          min={0}
          precision={2}
          style={{ width: "100%" }}
        />
      ),
    },
    {
      title: "采购价",
      dataIndex: "purchasePrice",
      key: "purchasePrice",
      width: "15%",
      render: (text: number, record: ExtendedPriceHistoryItem, index: number) => (
        <InputNumber
          value={text}
          onChange={(value) =>
            onUpdate(index, "purchasePrice", value)
          }
          min={0}
          precision={2}
          style={{ width: "100%" }}
        />
      ),
    },
    {
      title: "分成比例",
      dataIndex: "shareRatio",
      key: "shareRatio",
      width: "15%",
      render: (text: number, record: ExtendedPriceHistoryItem, index: number) => (
        <Select
          value={text}
          onChange={(value) => onUpdate(index, "shareRatio", value)}
          style={{ width: "100%" }}
        >
          <Select.Option value={0.1}>1成</Select.Option>
          <Select.Option value={0.15}>1.5成</Select.Option>
          <Select.Option value={0.2}>2成</Select.Option>
          <Select.Option value={0.25}>2.5成</Select.Option>
          <Select.Option value={0.3}>3成</Select.Option>
          <Select.Option value={0.35}>3.5成</Select.Option>
          <Select.Option value={0.4}>4成</Select.Option>
          <Select.Option value={0.45}>4.5成</Select.Option>
          <Select.Option value={0.5}>5成</Select.Option>
        </Select>
      ),
    },
    {
      title: "回收价格",
      dataIndex: "recoveryPrice",
      key: "recoveryPrice",
      width: "12%",
      render: (text: number) => (
        <span>{text?.toFixed(2)}</span>
      ),
    },
    {
      title: "平台利润",
      dataIndex: "platformProfit",
      key: "platformProfit",
      width: "12%",
      render: (text: number) => (
        <span>{text?.toFixed(2)}</span>
      ),
    },
    {
      title: "用户利润",
      dataIndex: "userProfit",
      key: "userProfit",
      width: "12%",
      render: (text: number) => (
        <span>{text?.toFixed(2)}</span>
      ),
    },
    {
      title: "操作",
      key: "action",
      width: "4%",
      render: (_: any, record: ExtendedPriceHistoryItem, index: number) => (
        <Button
          type="link"
          danger
          icon={<DeleteOutlined />}
          onClick={() => onDelete(index)}
          style={{ padding: "4px" }}
        />
      ),
    },
  ];

  return (
    <div>
      <div style={{ marginBottom: 12 }}>
        <Button
          type="primary"
          onClick={onAdd}
          style={{
            borderRadius: "4px",
            boxShadow: "0 2px 0 rgba(24,144,255,0.1)",
          }}
        >
          添加价格记录
        </Button>
      </div>
      <Table
        columns={columns}
        dataSource={priceHistory}
        rowKey="_id"
        pagination={false}
        size="small"
        style={{
          backgroundColor: "#fff",
          borderRadius: "4px",
        }}
      />
    </div>
  );
};

export default PriceHistoryTable; 